<template>


 <div style="text-align: center;height: 100vh;" >
    <img src="../assets/logo.png" alt="" style=" width: 60px;height: 60px;margin: 0 auto; margin-top: 20%;">


    <div class="login" style="margin: 20px 0;padding: 0 20px;">
        
    <van-search
    v-model="userPhone"
    placeholder="手机号"
    style="background-color: white;max-width: 80%; border: 0;"
    left-icon=""
    maxlength="11"
    @update:model-value="modelValue"

  />
  <button :style="{color:btnOn?'#bdc0c5':className}" style="border: 0;font-size: 13px; 
  background-color: aliceblue;position: absolute;top: 21%;right: 30px;" @click="userClick" :disabled="btnOn">{{ btnText }}</button>
  <p v-if="!isValidPhoneNumber" style="position: absolute;top:25%;left: 10%;color: red;font-size: 13px;">{{ store.msg }}</p>
<br>
  <van-search
    v-model="verificationCode"
    placeholder="验证码"
    style="background-color: white;border: 0;"
    left-icon=""
    :clearable="false"
  />
  <p v-if="!isValidVerificationCode" style="position: absolute;top:35%;left: 10%;color: red;font-size: 13px;">{{ store.msg }}</p>

  <!-- 遮罩层 -->
    <van-cell title="登录" is-link @click="userLogin" style="background-color: #ff5f16;margin-top: 40px ;color: white"  />
<van-popup v-model:show="show" :style="{ padding: '50px' }" >{{ store.msg }} <br> <br><span @click="clickOnSpan" >好</span></van-popup>
   
    <!-- <div style="font-size: 13px;color: #797d82; position: absolute;right: 25px;bottom: 52%;">收不到验证码</div> -->
 </div>
 </div>
</template>

<script setup>
import { onMounted, ref } from 'vue';
import router from '../router';
import listStore from '../store';

const userPhone = ref("")
const verificationCode = ref()

const isValidPhoneNumber = ref(true);
const btnOn = ref(true)
const btnText = ref("获取验证码")
const count = ref(60)
const className = ref("")

const isValidVerificationCode = ref(true)

const store = listStore()
const show = ref(false)

onMounted(()=>{
    store.bottom = false
})


// 获取验证码回调

const userClick = (async() =>{
   // 禁用按钮
   btnOn.value = true

  // 倒计时
  const timer = setInterval(()=>{
    count.value--
    if(count.value <= 0) {
      clearInterval(timer)
      btnOn.value = false
      count.value = 60
      btnText.value = "获取验证码"
    }else {

      btnText.value = `${count.value}秒`
    }
    
  },1000)
    store.mobile = userPhone.value
  
   await store.getTrue(store.mobile)
    console.log(store.status);
    // 根据状态码判断给出不同的错误提示信息
    if(store.status === 2002) {
      console.log("2002");
      isValidPhoneNumber.value = !isValidPhoneNumber.value
    }
})


// 输入框内容变化回调
const modelValue = ((value)=>{
  isValidPhoneNumber.value = true
    if(value.length == 11) {
      btnOn.value = false
      className.value = "black"
    } else {
      btnOn.value = true
    }
})

// 用户点击登录按钮回调
const userLogin = (async() =>{
  
    if(userPhone.value == "" || userPhone.value == undefined) {
      store.msg = "请输入手机号"
        isValidPhoneNumber.value = !isValidPhoneNumber.value 
        return
    }
   store.smsCode = verificationCode.value
   store.mobile = userPhone.value
  await store.getSms(store.mobile,store.smsCode)


   if(store.status === 2002) {
      console.log("2002");
      isValidPhoneNumber.value = !isValidPhoneNumber.value
      console.log(store.msg);
      return
    }

   if(store.status == 6102) {
    show.value = true
    return
   }
   // 用户点击登录成功 路由跳转 center
   if(store.msg == "ok") {
    router.push("/center")
   }
})

// 用户点击 遮罩层 好的回调
const clickOnSpan = (()=>{
  show.value = false
})




</script>

<style >

.van-search__content {
  background-color: white !important;;
}
.van-icon-arrow:before {
  content: none !important;
}
</style>